﻿@{
    Layout = "../_share/_Layout.cshtml";
    Page.Title = "钻孔轨迹";
}
<link href="../../Content/css/jquery.dataTables.css" rel="stylesheet" />
<link href="../../Content/css/tracking3d.css" rel="stylesheet" />
<link href="../../Content/css/dataTables.fixedHeader.min.css" rel="stylesheet" />
<link href="../../Content/css/dataTables.scroller.min.css" rel="stylesheet" />
<link href="../../Content/css/select2.css" rel="stylesheet" />


<div id="container" style="width: 100%; top: -80px; height: 800px; position: absolute;  ">
@*    <div id="chartContainer" style=" width:20%;height:100%;position: absolute;display: none;">*@
@*        <div id="yzChart" style="height: 33%"></div>*@
@*        <div id="xyChart" style="height: 34%"></div>*@
@*        <div id="xzChart" style="height: 33%"></div>*@
@*    </div>*@
@*    <div id="dataContainer" style=" width:300px;height:auto;position: absolute;display: none;right: 0px;top: 20px; overflow:auto"></div>*@
    <div class="container" style="position: relative;top: 160px">
        <div class=" text-center">
            <span>钻孔编号：</span>
            <span id="holeIds" style=" width: 70%; "></span>
            <button id="btnShow" class="btn btn-primary">展示</button>
            <button id="btnRefresh" class="btn btn-primary">恢复默认</button>
        </div>
    </div>
</div>
@*<div id="tips" style="width: 240px; height: auto; position: absolute; z-index: 999999; display: none; color: #ffffff;">*@
@*    序号:017<br />坐标：70.00,77.13,50.00<br />时间：2014/5/13 10:35:03<br />孔深：0.00*@
@*</div>*@



<script src="../../Scripts/libs/jquery.mousewheel.js"></script>
<script src="../../Scripts/libs/Three.js"></script>
<script src="../../Scripts/libs/RequestAnimationFrame.js"></script>
<script src="../../Scripts/libs/stats.min.js"></script>
<script src="../../Scripts/libs/jsUtils.js"></script>
<script src="../../Scripts/libs/dat.gui.min.js"></script>
<script src="../../Scripts/libs/canvasjs.min.js"></script>
<script src="../../Scripts/libs/jquery.dataTables.min.js"></script>
<script src="../../Scripts/libs/dataTables.fixedHeader.min.js"></script>
<script src="../../Scripts/libs/select2.js"></script>
<script src="../../Scripts/controls/TrackballControls.js"></script>
<script src="../../Scripts/controls/FirstPersonControls.js"></script>
<script src="../../Scripts/controls/OrbitControls.js"></script>
<script src="../../Scripts/sim/sim.js"></script>
<script src="../../Scripts/three-helper.js"></script>

<script src="js/tracking3d.js"></script>
<script src="js/axis.js"></script>
<script src="js/axis2d.js"></script>
<script src="js/tracking.js"></script>
<script src="js/plane.js"></script>
<script src="js/pointSphere.js"></script>
<script src="js/xyView.js"></script>
<script src="js/xzView.js"></script>
<script src="js/yzView.js"></script>

<script src="../../Content/fonts/optimer_regular.typeface.js"></script>

<script>
    var container = $("#container")[0];
    var app = new Tracking3DApp();
    app.init({
        container: container,
    });
    app.run();

    var pageSize = 1; //查找5天的数据。
    $(document).ready(function () {
        $("#holeIds").select2({
            placeholder: "请选择最多5个钻孔编号",
            maximumInputLength: 10,
            maximumSelectionSize: 5,
            multiple: true,
            ajax: {
                dataType: 'jsonp',
                quietMillis: 50,
                //The url of the json service
                url: "../../Controllers/DrillingDataController.ashx?cmd=GetHoleIds",
                //Our search term and what page we are on
                data: function (term, page) {
                    return {
                        pageSize: pageSize,
                        pageNum: page,
                        searchTerm: term
                    };
                },
                results: function (data, page) {
                    var select2Results = [];
                    var d = $.parseJSON(data);
                    var more = (page * pageSize) < d.Total;
                    for (var i = 0; i < d.Results.length; i++) {
                        var item = d.Results[i];
                        var group = select2Results[item.Group];
                        if (!group) {
                            group = { text: item.Group, children: [] };
                        }
                        for (var j = 0; j < item.Options.length; j++) {
                            var option = item.Options[j];
                            group.children.push({ id: option.id, text: option.text });
                        }

                        select2Results.push(group);
                    }

                    return {
                        results: select2Results,
                        more: more
                    };
                }
            },
            dropdownCssClass: "bigdrop",
            escapeMarkup: function (m) { return m; }
        });

        $("#btnShow").click(function () {
            var list = $("#holeIds").select2("val");
            if (!list && list.length == 0) return;

            $.getJSON("../../Controllers/DrillingDataController.ashx?cmd=GetHoleData", { holeId: list }, function (result) {
                app.show(result);
            }).error(function (jqXHR, textStatus, errorThrown) {
                console.log("error " + textStatus);
                console.log("incoming Text " + jqXHR.responseText);
            });
        });

        $("#btnRefresh").click(function () {
            window.location.reload();
            localStorage.clear();
        });

        $(window).resize(function () {
            app.lookAtZero();
        });
    });
</script>